import Taro from '@tarojs/taro'
import {View, Text} from '@tarojs/components'
import {connect} from '@tarojs/redux'
import bgImg from '../../assets/bg_publish.jpg'
import project from '../../assets/project.svg'
import funding from '../../assets/funding.svg'
import legal from '../../assets/legal.svg'
import config from '../../config'
import request from '../../utils/request'
import withShare from '../../components/share/withShare'
import {AtIcon, AtModal} from 'taro-ui'

import './index.less'

@connect(state => ({
  cms: state.cms,
}))
@withShare()
export default class Index extends Taro.Component {

  config = {
    navigationBarTitleText: '发布'
  }

  constructor() {
    super(...arguments)

    this.state = {
      isOpened4CertFunding: false,
      isOpened4CertLegal: false,
    }
  }

  componentDidShow() {
    if (!Taro.getStorageSync('sys_user_info')) {
      this.login();
    }
  }

  login = () => {
    if (!Taro.getStorageSync('openid')) {
      Taro.login({
        success: (res) => {
          if (res.code) {
            request(`${config.apiPrefix}/weapps_login?code=${res.code}`).then(res => {
              if (res && res.code === config.resultCode.ERR_OK) {
                Taro.setStorageSync('openid', res.data.openid)
                Taro.setStorageSync('session_key', res.data.session_key)

                this.getCustomerInfoByOpenid(res.data.openid)
              } else {
                console.log('登录失败！' + res.message)
              }
            });
          } else {
            console.log('登录失败！' + res.errMsg)
          }
        }
      });
    } else {
      this.getCustomerInfoByOpenid(Taro.getStorageSync('openid'))
    }
  }

  // get customer info by openid
  getCustomerInfoByOpenid = openid => {
    request(`${config.apiPrefix}/customers_get_by_openid?openid=${openid}`).then(res => {
      if (res && res.code === config.resultCode.ERR_OK) {
        Taro.setStorageSync('sys_user_info', res.data)
      } else {
        console.log(res.message)
      }
    });
  }

  onTo = () => {
    if (!Taro.getStorageSync('sys_user_info')) {
      Taro.navigateTo({
        url: '/pages/register/index',
      });
      return;
    }

    // to publish page
    Taro.navigateTo({
      url: '/pages/publish/index',
    });
  }

  certFunding = () => {
    this.setState({
      isOpened4CertFunding: true,
    })
  }

  certLeagal = () => {
    this.setState({
      isOpened4CertLegal: true,
    })
  }

  handleConfirm4CertFunding = () => {
    this.setState({
      isOpened4CertFunding: false,
    })
  }

  handleConfirm4CertLegal = () => {
    this.setState({
      isOpened4CertLegal: false,
    })
  }

  render() {
    const {isOpened4CertFunding, isOpened4CertLegal} = this.state;

    return (
      <View className='container'>
        <View className='header'>
          <Image className='img' mode='widthFix' src={bgImg}/>
          <Text class='title'>发布项目 认证资方、服务方</Text>
        </View>

        <View className='content'>
          <View className='btn-img' onClick={this.onTo}>
            <Image className='img' mode='widthFix' src={project}/>
            <View className='info-wrapper'>
              <Text class='title'>发布项目</Text>
              <Text class='desc'>请提前准备好项目地区位置</Text>
            </View>
            <View className='link-wrapper'>
              <AtIcon value='chevron-right' size='30' color='#EEE'/>
            </View>
          </View>
          <View className='btn-img' onClick={this.certFunding}>
            <Image className='img' mode='widthFix' src={funding}/>
            <View className='info-wrapper'>
              <Text class='title'>认证资方</Text>
              <Text class='desc'>请提前准备好项目地区位置</Text>
            </View>
            <View className='link-wrapper'>
              <AtIcon value='chevron-right' size='30' color='#EEE'/>
            </View>
          </View>
          <View className='btn-img' onClick={this.certLeagal}>
            <Image className='img' mode='widthFix' src={legal}/>
            <View className='info-wrapper'>
              <Text class='title'>认证服务方</Text>
              <Text class='desc'>请提前准备好项目地区位置</Text>
            </View>
            <View className='link-wrapper'>
              <AtIcon value='chevron-right' size='30' color='#EEE'/>
            </View>
          </View>
        </View>

        <AtModal
          isOpened={isOpened4CertFunding}
          title='认证资方说明'
          confirmText='好的'
          onConfirm={this.handleConfirm4CertFunding}
          content='认证资方请联系：\n\r18049992159 孙先生\n\r18352513572 任先生'
        />

        <AtModal
          isOpened={isOpened4CertLegal}
          title='认证服务方说明'
          confirmText='好的'
          onConfirm={this.handleConfirm4CertLegal}
          content='认证服务方请联系：\n\r18049992159 孙先生\n\r18352513572 任先生'
        />
      </View>
    )
  }
}

